import axios from 'axios'
import React, { useEffect, useState } from 'react'

import { Space, Table, Tag, Image } from 'antd';
const { Column, ColumnGroup } = Table;

function Film() {
  let [data, setdata] = useState([])
  let [count, setcount] = useState([])
  useEffect(() => {
    axios.get('http://localhost:3000/getplays').then((data, err) => {
      console.log(data.data);
      setdata(data.data.data)
      setcount(data.data.count)
    })
  }, [])
  return (
    <div>
      <Table dataSource={data}>
        <Column title="电影名称" dataIndex="name" key="name" />
        <Column title="简介" width={500} dataIndex="self" key="self" />
        <Column title="电影类型" dataIndex="type" key="type" />
        <Column
          title="封面"
          dataIndex="image"
          key="image"
          render={(img) => (
            <>
              <Image.PreviewGroup
                preview={{
                  onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`),
                }}
              >
                {console.log(img)}
                <Image width={100} src={img} />
                {/* <Image width={200} src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" /> */}
              </Image.PreviewGroup>
            </>
          )}
        >

        </Column>
        <Column
          title="Action"
          key="action"
          render={(_, record) => (
            <Space size="middle">
              <a>Invite {record.lastName}</a>
              <a>Delete</a>
            </Space>
          )}
        />
      </Table>
    </div>
  )
}
export default Film
